import { Button, Card, Form, Input, Space } from "antd";
import { useCallback, useEffect } from "react";
import { useState } from "react";
import { GET_USERS } from "../../api/user";
import MTable from "../../components/MTable";

function UserList() {
  // 存储用户数据
  let [users, setUsers] = useState([])
  // 设置列样式数据
  let columns = [
    {
      title: "头像",
      dataIndex: "avatar",
      key: "avatar",
      render: (text, record) => {
        return (
          <img src={text} style={{ width: 60, height: 60 }} alt="" />
        )
      }
    },
    {
      title: "用户名",
      dataIndex: "nickname",
      key: "nickname",
    },
    {
      title: "操作",
      dataIndex: "action",
      key: "action",
      render: (text, record) => {
        return (
          <Space>
            <Button type="primary">编辑</Button>
            <Button type="primary" danger onClick={() => remove(record)}>删除</Button>
          </Space>
        )
      }
    }
  ]

  // 存储请求参数
  let [params, setParams] = useState({
    page: 1,
    limit: 10,
    title: "",
  })
  // 存储请求数据总数
  let [total, setTotal] = useState(0)

  // 获取数据，改变过滤条件时触发
  let getData = useCallback(async (FilterParams) => {
    setParams({
      ...params,
      ...FilterParams,
    })
    console.log("params改变,获取数据", params);
    let res = await GET_USERS(params)
    console.log(res);
    setUsers(res.data?.users)
    setTotal(res.data?.total)
  }, [params])


  // 查询条件
  let filter = (values) => {
    getData(values)
  }

  return (
    <>
      <Space direction="vertical" style={{ display: "flex" }}>
        <Card>
          <Form layout="inline" onFinish={filter}>
            <Form.Item name="nickname" label="用户名">
              <Input placeholder="请输入用户名查询"></Input>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">查询</Button>
            </Form.Item>
          </Form>
        </Card>
        <MTable dataSource={users} columns={columns} total={total} getData={getData}></MTable>
      </Space>
    </>
  );
}

export default UserList;